<template>
    <main class="main">
        <div class="shoot-hd">
            <div class="breadcrum">
                <span>当前位置</span>
                <el-breadcrumb :separator-icon="ArrowRight">
                    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                    <el-breadcrumb-item>promotion management</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!-- 提示区域 -->
            <div class="tip">
                <span> 提示区域</span>
            </div>
        </div>
        <div class="content">
            <!-- 左边的侧边栏 -->
            <Aside></Aside>

            <!-- 右边的内容区域 -->
            <section class="right-content">
                <div class="top-nav">
                    <a href="#" :class="{active:componentTabs == Introduce}" @click="switchComonent(Introduce)">靶场介绍</a>
                    <a href="#" :class="{active:componentTabs == Notbook}" @click="switchComonent(Notbook)">过程解析</a>
                    <a href="#" :class="{active:componentTabs == Comment}" @click="switchComonent(Comment)">靶场评论</a>
                </div>
                <!--  -->
                <!-- <Introduce></Introduce>
                <Comment/>
                <Notbook/> -->
             <component :is="componentTabs"></component>
                
            </section>




        </div>

    </main>
</template>

<script setup lang=ts>
import { ref , shallowRef} from "vue";
import { ArrowRight } from '@element-plus/icons-vue'
import Aside from '../../component/Aside.vue';
import Comment from '../../component/Comment.vue';
import Introduce from '../../component/Introduce.vue'
import Notbook from '../../component/Notbook.vue';
let componentTabs = shallowRef(Introduce)
const switchComonent = (val:any)=>{
    componentTabs.value = val
}
</script>

<style scoped lang=scss>
.main {
    width: 24rem;
    margin: 0 auto;
}

.shoot-hd {
    display: flex;
    height: 1.025rem;
    align-items: center;
    justify-content: space-between;
    font-size: 0.3rem;

    .breadcrum {
        display: flex;
        align-items: center;

        .el-breadcrumb__inner {
            font-size: 0.3rem;
        }
    }

    .tip {
        font-size: 0.25rem;
    }
}

.content {
    display: flex;
}

.right-content {
    margin-left: 1.2625rem;
    height: 6.25rem;
    width: 16.9125rem;
    
}

.top-nav {
    display: flex;
    align-items: center;
    width: 6.25rem;

    background: #F2F5F7;
    border-radius: 0.1rem;
    padding: 0.075rem;
    font-size: 0.3rem;
    margin-bottom: 0.4rem;

    a {
        display: flex;
        width: 2.0875rem;
        height: 0.8125rem;
        align-items: center;
        color: #000;
        justify-content: center;

        &.active {
            width: 2.0875rem;
            color: white;
            height: 0.8125rem;
            background: #139DFF;
            border-radius: 0.075rem;
        }
    }

}

</style>